<template>
  <div class="payment-statistics">
    <el-row :gutter="20">
      <!-- 统计卡片 -->
      <el-col :span="6" v-for="card in statisticsCards" :key="card.title">
        <el-card class="statistics-card">
          <div class="card-content">
            <div class="card-icon" :style="{ backgroundColor: card.color }">
              <el-icon><component :is="card.icon" /></el-icon>
            </div>
            <div class="card-info">
              <div class="card-title">{{ card.title }}</div>
              <div class="card-value">{{ card.value }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" style="margin-top: 20px;">
      <!-- 支付方式统计 -->
      <el-col :span="12">
        <el-card class="chart-card">
          <template #header>
            <div class="card-header">
              <span>支付方式统计</span>
            </div>
          </template>
          <div class="chart-container">
            <div ref="paymentMethodChart" style="height: 300px;"></div>
          </div>
        </el-card>
      </el-col>

      <!-- 支付趋势 -->
      <el-col :span="12">
        <el-card class="chart-card">
          <template #header>
            <div class="card-header">
              <span>支付趋势</span>
            </div>
          </template>
          <div class="chart-container">
            <div ref="paymentTrendChart" style="height: 300px;"></div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 详细统计表格 -->
    <el-card style="margin-top: 20px;">
      <template #header>
        <div class="card-header">
          <span>支付详情统计</span>
          <el-button type="primary" @click="exportStatistics">导出统计</el-button>
        </div>
      </template>
      
      <el-table :data="statisticsData" style="width: 100%">
        <el-table-column prop="date" label="日期" width="120" />
        <el-table-column prop="totalAmount" label="总金额" width="120">
          <template #default="scope">
            ¥{{ scope.row.totalAmount.toFixed(2) }}
          </template>
        </el-table-column>
        <el-table-column prop="totalCount" label="支付笔数" width="120" />
        <el-table-column prop="wechatAmount" label="微信支付" width="120">
          <template #default="scope">
            ¥{{ scope.row.wechatAmount.toFixed(2) }}
          </template>
        </el-table-column>
        <el-table-column prop="alipayAmount" label="支付宝" width="120">
          <template #default="scope">
            ¥{{ scope.row.alipayAmount.toFixed(2) }}
          </template>
        </el-table-column>
        <el-table-column prop="unionpayAmount" label="银联支付" width="120">
          <template #default="scope">
            ¥{{ scope.row.unionpayAmount.toFixed(2) }}
          </template>
        </el-table-column>
        <el-table-column prop="balanceAmount" label="余额支付" width="120">
          <template #default="scope">
            ¥{{ scope.row.balanceAmount.toFixed(2) }}
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from 'vue'
import * as echarts from 'echarts'
import { paymentStatisticsApi } from '@/api/payment'
import { showError, showInfo } from '@/utils/message'

// 统计卡片数据
const statisticsCards = ref([
  {
    title: '今日支付总额',
    value: '¥0.00',
    icon: 'Money',
    color: '#409EFF'
  },
  {
    title: '本月支付总额',
    value: '¥0.00',
    icon: 'TrendCharts',
    color: '#67C23A'
  },
  {
    title: '支付成功率',
    value: '0%',
    icon: 'SuccessFilled',
    color: '#E6A23C'
  },
  {
    title: '待处理支付',
    value: '0',
    icon: 'Clock',
    color: '#F56C6C'
  }
])

// 图表引用
const paymentMethodChart = ref()
const paymentTrendChart = ref()

// 统计数据
const statisticsData = ref([])

// 初始化支付方式统计图表
const initPaymentMethodChart = () => {
  const chart = echarts.init(paymentMethodChart.value)
  const option = {
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    series: [
      {
        name: '支付方式',
        type: 'pie',
        radius: '50%',
        data: [
          { value: 0, name: '微信支付' },
          { value: 0, name: '支付宝' },
          { value: 0, name: '银联支付' },
          { value: 0, name: '余额支付' }
        ]
      }
    ]
  }
  chart.setOption(option)
}

// 初始化支付趋势图表
const initPaymentTrendChart = () => {
  const chart = echarts.init(paymentTrendChart.value)
  const option = {
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      data: []
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '支付金额',
        type: 'line',
        data: []
      }
    ]
  }
  chart.setOption(option)
}

// 加载统计数据
const loadStatistics = async () => {
  try {
    const today = new Date().toISOString().split('T')[0]
    const result = await paymentStatisticsApi.getStatistics({
      startDate: today,
      endDate: today
    })
    
    if (result.code === 200 && result.data) {
      // 更新统计卡片
      const data = result.data
      statisticsCards.value[0].value = `¥${(data.totalAmount || 0).toFixed(2)}`
      statisticsCards.value[1].value = `¥${(data.totalAmount || 0).toFixed(2)}`
      statisticsCards.value[2].value = `${((data.successCount / data.totalCount) * 100 || 0).toFixed(1)}%`
      statisticsCards.value[3].value = String((data.totalCount - data.successCount - data.failedCount) || 0)
    }
  } catch (error) {
    console.error('加载统计数据失败:', error)
    showError('加载统计数据失败，请重试')
  }
}

// 导出统计
const exportStatistics = () => {
  showInfo('导出功能开发中...')
}

onMounted(() => {
  loadStatistics()
  initPaymentMethodChart()
  initPaymentTrendChart()
})
</script>

<style scoped>
.payment-statistics {
  padding: 20px;
}

.statistics-card {
  margin-bottom: 20px;
}

.card-content {
  display: flex;
  align-items: center;
}

.card-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  color: white;
  font-size: 24px;
}

.card-info {
  flex: 1;
}

.card-title {
  font-size: 14px;
  color: #666;
  margin-bottom: 5px;
}

.card-value {
  font-size: 24px;
  font-weight: bold;
  color: #333;
}

.chart-card {
  margin-bottom: 20px;
}

.chart-container {
  padding: 10px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style> 